import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Loading加载组件
 * @element zss-loading
 */
@customElement('zss-loading')
export class ZssLoading extends LitElement {
  static styles = css`
    :host {
      display: inline-block;
    }

    .loading {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .loading__spinner {
      display: inline-block;
      position: relative;
      width: 1em;
      height: 1em;
    }

    .loading__spinner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 2px solid var(--zss-border-color-lighter);
      border-top: 2px solid var(--zss-color-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    .loading__text {
      margin-left: 8px;
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-regular);
    }

    /* 尺寸 */
    .loading--small .loading__spinner {
      width: 14px;
      height: 14px;
    }

    .loading--small .loading__text {
      font-size: var(--zss-font-size-extra-small);
    }

    .loading--large .loading__spinner {
      width: 20px;
      height: 20px;
    }

    .loading--large .loading__text {
      font-size: var(--zss-font-size-medium);
    }

    /* 全屏模式 */
    .loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loading-mask .loading {
      flex-direction: column;
    }

    .loading-mask .loading__spinner {
      width: 40px;
      height: 40px;
    }

    .loading-mask .loading__text {
      margin-left: 0;
      margin-top: 16px;
      font-size: var(--zss-font-size-medium);
    }

    /* 动画 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 自定义颜色 */
    .loading--custom .loading__spinner::before {
      border-top-color: var(--custom-color, var(--zss-color-primary));
    }
  `;

  /**
   * 加载文本
   * @attr text
   */
  @property({ type: String })
  text = '';

  /**
   * 加载尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 是否全屏显示
   * @attr fullscreen
   */
  @property({ type: Boolean })
  fullscreen = false;

  /**
   * 自定义颜色
   * @attr custom-color
   */
  @property({ type: String })
  customColor = '';

  /**
   * 自定义类名
   * @attr custom-class
   */
  @property({ type: String })
  customClass = '';

  render() {
    const loadingClasses = [
      'loading',
      this.size !== 'default' ? `loading--${this.size}` : '',
      this.customColor ? 'loading--custom' : '',
      this.customClass
    ].filter(Boolean).join(' ');

    const spinnerStyle = this.customColor ? 
      `--custom-color: ${this.customColor}` : '';

    const content = html`
      <div class=${loadingClasses}>
        <div class="loading__spinner" style=${spinnerStyle}></div>
        ${this.text ? html`
          <span class="loading__text">${this.text}</span>
        ` : ''}
      </div>
    `;

    if (this.fullscreen) {
      return html`
        <div class="loading-mask">
          ${content}
        </div>
      `;
    }

    return content;
  }

  /**
   * 静态方法：显示全屏加载
   */
  static service(options: {
    text?: string;
    customColor?: string;
    customClass?: string;
  } = {}) {
    const loading = document.createElement('zss-loading') as ZssLoading;
    
    loading.fullscreen = true;
    loading.text = options.text || '';
    loading.customColor = options.customColor || '';
    loading.customClass = options.customClass || '';
    
    document.body.appendChild(loading);
    
    return {
      close: () => {
        if (loading.parentNode) {
          loading.parentNode.removeChild(loading);
        }
      }
    };
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-loading': ZssLoading;
  }
}